<template>
    <div>
        <div class="topnavAndBanner">
            <Topnav></Topnav>
            <div class="banner">
                <h1>飒UI</h1>
                <h2>一个厉害的UI框架</h2>
                <p class="actions">
                    <a target="_blank" href="https://gitee.com/gone-time/wui-next">Gitee</a>
                    <router-link to="/doc">开始</router-link>
                </p>
            </div>
        </div>
        <div class="features">
            <ul>
                <li>
                    <svg class="icon">
                        <use xlink:href="#icon-Vue"></use>
                    </svg>
                    <h3>基于 Vue 3.2</h3>
                    <p>使用了Vue 3 组合式API及3.2 Setup语法糖和新特性</p>
                </li>
                <li>
                    <svg class="icon">
                        <use xlink:href="#icon-ts"></use>
                    </svg>
                    <h3>基于 TypeScript</h3>
                    <p>源代码采用了 TypeScript 书写（非严格检查模式）</p>
                </li>
                <li>
                    <svg class="icon">
                        <use xlink:href="#icon-lights"></use>
                    </svg>
                    <h3>代码易读</h3>
                    <p>每个组件源代码都极其简洁</p>
                </li>
                <li>
                    <svg class="icon">
                        <use xlink:href="#icon-shandian"></use>
                    </svg>
                    <h3>Vite 2</h3>
                    <p>官网基于Vite 2.9.9版本</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import Topnav from '../components/Topnav.vue'
</script>

<style scoped lang="scss">
@use "sass:math";
$color:#42b7af;

.topnavAndBanner {
    background: linear-gradient(176deg, rgba(200, 238, 194, 1) 0%, rgba(188, 237, 208, 1) 50%, rgba(165, 235, 236, 1) 100%);
    clip-path: ellipse(80% 60% at 50% 40%);
}

.features {
    margin: 64px auto;

    @media (min-width:800px) {
        width: 800px;
        >ul {
            > li {
                width: 50%;
            }
        }
    }

    @media (min-with:1200px) {
        width: 1200px;
        >ul {
            > li {
                width: 25%;
            }
        }
    }

    >ul{
        display: flex;
        flex-wrap: wrap;
        >li{
            width: 400px;
            margin: 16px 0;
            display: grid;
            justify-content: start;
            align-content: space-between;
            grid-template-areas: 
            "icon title"
            "icon text";
            grid-template-columns: 80px auto;
            grid-template-rows: 1fr auto;
            >svg{
                grid-area: icon;
                width: 64px;
                height: 64px;
            }
            >h3{
                grid-area: title;
                font-size: 28px;
            }
            >p{
                grid-area: text;
            }
        }
    }
}

.banner {
    color: $color;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    >.actions {
        padding: 0 8px;

        a {
            margin: 0 8px;
            background-color: #74b9b4;
            color: white;
            display: inline-block;
            border-radius: 4px;
            padding: 8px 24px;

            &:hover {
                text-decoration: none;
            }
        }
    }
}
</style>